{% extends "base.html" %}

{% block content %}

<script>
    function LogButton() {
        var d = new Date();
        var height = 600;
        var width = 900;
        var top = (screen.height - height) / 2;
        var left = (screen.width - width) / 2;
        window.open("{{ url_for('logs') }}?log=plotting", 'Plotman Log', 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
    }
    function PlotsLogButton(plot_id) {
        var d = new Date();
        var height = 600;
        var width = 900;
        var top = (screen.height - height) / 2;
        var left = (screen.width - width) / 2;
        window.open("{{ url_for('logs') }}?log=plotting&log_id=" + plot_id, 'Plotman Log ' + plot_id, 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
    }
</script>

<div class="position-relative">
    <div class="position-absolute top-0 end-0">
        <a href="#" title="View Logs" onclick='LogButton();return false;'>
            <i class="fs-4 bi-text-indent-left"></i>
        </a>
    </div>
</div>

<header class="pb-3 mb-4 border-bottom">
    <span class="fs-4">Plotting Status: {{ plotting.display_status }}</span>
</header>

<div class="modal fade" id="killModal" tabindex="-1" aria-labelledby="killModalLabel" aria-hidden="true">
    <div class="modal-dialog bg-dark rounded-3">
        <div class="modal-content bg-dark">
            <div class="modal-header bg-dark">
                <h5 class="modal-title" id="killModalLabel">Confirm Kill</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-dark">
                This action will terminate the selected plots, whether running or stopped, and delete all
                their temporary files. Continue?
            </div>
            <div class="modal-footer bg-dark">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-success" data-bs-dismiss="modal" id="btnConfirmKill">Kill
                    Selected</button>
            </div>
        </div>
    </div>
</div>

<div>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    {% if category == 'message' %}
    <div class="alert alert-warning" role="alert">
        {% else %}
        <div class="alert alert-{{ category }}" role="alert">
            {% endif %}
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
    </div>


    <form method="POST" id="plotman-form" style="padding-bottom: 10px;">
        {% if not plotting.plotman_running %}
        <fieldset>
            <input type="hidden" id="action" name="action" value="start" />
            <button type="submit" class="btn btn-outline-success" id="btnStart"
                title="Plotman is currently stopped.">Plot On!</button>
        </fieldset>
        {% else %}
        <fieldset>
            <input type="hidden" id="action" name="action" value="stop" />
            <button type="submit" class="btn btn-outline-success" id="btnStop"
                title="Plotman is currently running.">Stop Plotman</button>
        </fieldset>
        {% endif %}
    </form>

    <form method="POST" id="plotting-form">
        <div class="table-responsive">
            <table class="table table-dark">
                <thead>
                    <tr>
                        <th scope="col" class="text-success"></th>
                        {% for column in plotting.columns %}
                        <th scope="col" class="text-success">{{ column }}</th>
                        {% endfor %}
                        <th scope="col" class="text-success"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in plotting.rows %}
                    <tr>
                        <td class="text-center"><input type="checkbox" name="plot_id" value="{{ row['plot_id'] }}" />
                        </td>
                        {% for column in plotting.columns %}
                        <td>{{ row[column] }}</td>
                        {% endfor %}
                        <td style="padding:0px">
                            <!-- Careful, VS Code likes to wrap next line and break it. -->
                            <a href="#" title="View Logs" onclick='PlotsLogButton("{{ row['plot_id'] }}");return false;'>
                                <i class="fs-4 bi-text-indent-left"></i>
                            </a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if plotting.rows|length > 0 %}
        <fieldset>
            <button form="plotting-form" type="submit" name="action" value="suspend" class="btn btn-outline-success"
                id="btnSuspend">Suspend Selected</button>
            <button form="plotting-form" type="submit" name="action" value="resume" class="btn btn-outline-success"
                id="btnResume">Resume Selected</button>
            <button type="button" data-bs-toggle="modal" data-bs-target="#killModal" class="btn btn-outline-success"
                id="btnKill">Kill Selected</button>
        </fieldset>
        {% endif %}
    </form>

    <script>
        $(document).ready(function () {
            $("#btnStart").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Starting...`
                );
                $("#plotman-form").submit();
            });
            $("#btnStop").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Stopping...`
                );
                $("#plotman-form").submit();
            });
            $("#btnSuspend").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Suspending...`
                );
                $('#plotting-form').append('<input type="hidden" id="action" name="action" value="suspend" />');
                $("#plotting-form").submit();
            });
            $("#btnResume").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Resuming...`
                );
                $('#plotting-form').append('<input type="hidden" id="action" name="action" value="resume" />');
                $("#plotting-form").submit();
            });
            $("#btnConfirmKill").click(function () {
                $('btnKill').prop("disabled", true);
                $('btnKill').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Killing...`
                );
                $('#plotting-form').append('<input type="hidden" id="action" name="action" value="kill" />');
                $("#plotting-form").submit();
            });
        })
    </script>

    {% endblock %}